<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>专场介绍</title>
    <link rel="stylesheet" href="./css/base.css">
    <link rel="stylesheet" href="css/mescroll.min.css">
    <link rel="stylesheet" href="./css/iconfont.css">
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <!-- 新 Bootstrap 核心 CSS 文件 -->
    <link href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">

    <!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>

    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
    
    <style>
        .head {
            padding: 1rem;
        }

        .top-content {
            position: relative;
            display: flex;
            padding-bottom: 0.5rem;
        }

        .top-content .has-img {
            position: relative;
        }

        .top-content .has-img img {
            width: 6.5rem;
            height: 6.5rem;
            border-radius: 50%;
        }

        .has-tit p {
            font-size: 15px;
            font-weight: bold;
            padding: 7px 0px 1px 21px;

        }

        .other-content .s {
            position: absolute;
            bottom: 0px;
            right: 0px;
        }

        .my-icon-qizi:before {
            content: "\e60c";
            color: rgba(20, 154, 231, 0.986);
        }

        .my-icon-xiaochengxu_tubiao:before {
            content: "\e608";
            color: rgba(20, 154, 231, 0.986);
        }

        .my-icon-shijian:before {
            content: "\e684";
            color: rgba(20, 154, 231, 0.986);
        }

        .has-button {
            background: green;
            position: absolute;
            padding: 2px 5px;
            border-radius: 5px;
            top: 61px;
            right: 35px;
            color: #fff;
        }

        .has-tit p {
            text-overflow: -o-ellipsis-lastline;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
        }

        .has-icon span {
            font-size: 12px;
        }

        .main {
            background: rgb(223, 216, 216);
            padding-top: 0.5rem;
        }

        .nav-tabs {
            border-bottom: 1px solid #ddd;
            display: flex;
            justify-content: space-between;
            background: #fff;

        }


        .nav-tabs .active a {
            border: none !important;
            border-bottom: solid 3px #3498db !important;
        }

        .container {
            padding: 0;
        }

        #tab-content {
            background: #fff;
        }

        #tab-content .p1 {
            text-indent: 20px;
            font-size: 13px;
        }

        /* 搜索栏 */
        .search-bar {
            position: sticky;
            width: 100%;
            background: #fff;
            padding: 0.5rem 1rem;
        }

        .search-bar .searchform {
            background: #F7F8FA;
        }


        .my-icon-sousuo:before {
            content: "\e618";
            margin-left: 1rem;
        }

        .search-bar .searchform .form-control {
            border: none;
            box-shadow: none;
            background: #F7F8FA;
        }

        .searchform .input-group {
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .cart {
            display: flex;
            padding: 1rem 1rem 0rem 1rem;
            border-bottom: 1px #ddd solid;
        }

        .cart .cart-left {
            width: 60%;
        }

        .cart .cart-left p {
            text-overflow: -o-ellipsis-lastline;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 1;
            -webkit-box-orient: vertical;
        }

        .cart .cart-right {
            width: 40%;
            position: relative;
        }

        .cart .cart-right p {
            text-overflow: -o-ellipsis-lastline;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 1;
            -webkit-box-orient: vertical;
            margin-right: 1rem;
            text-align: center;
        }

        .cart-left .cart-tit {
            font-size: 15px;
            font-weight: bold;
        }

        .cart-right .salary {
            color: #10a1e8;
        }

        .cart-left .cart-other {
            color: #888;
            font-size: 12px;
        }

        .cart-right .cart-company {
            color: #888;
        }

        .cart-right i {
            position: absolute;
            top: 1px;
            right: 0px;
        }

        .item-container {
            width: 100%;
            background: #fff;
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: row;
            padding: 0.5rem 1rem;
            border-bottom: 1px #ddd solid;
            border-radius: 8px;
            margin-bottom: 1rem;
        }

        .item-container .left-has-img {
            width: 21%;
            height: 100%;
            /* background: forestgreen; */
            position: relative;
        }

        .item-container .left-has-img img {
            width: 6.5rem;
            height: 6.5rem;
            border-radius: 50%;
        }

        .item-container .item-content {
            width: 72%;
            height: 100%;
            margin-left: 1rem;
            /* background: gold; */
        }

        .item-content .content-person {
            font-size: 1.5rem;
            font-weight: 600;
        }

        .item-content p {
            margin: 0 !important;
            padding: 1px;
        }

        .item-content .p .has-style {
            color: #888888;
        }

        .item-content .content-person .has-margin {
            margin-left: 1rem;
        }

        #tab-content .search-bar.fixed {
            position: fixed;
            top: 0;
            z-index: 200;
            background: #fff;
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="head">
            <div class="top-content">
                <div class="has-img">
                    <img src="`+ n.image + `">
                </div>
                <div class="has-tit">
                    <p>`+ n.company + `</p>
                </div>

            </div>
            <div class="other-content">
                <div class="has-icon">
                    <i class="iconfont my-icon-qizi"></i>
                    <span>主办方:`+ n.school + `</span></div>
                <div class="has-icon">
                    <i class="iconfont my-icon-xiaochengxu_tubiao"></i>
                    <span>地点:`+ n.site + `</span></div>
                <div class="has-icon">
                    <i class="iconfont my-icon-shijian"></i>
                    <span>时间:`+ n.time + `</span></div>
                <div class="has-button">已报名/未报名
                </div>
            </div>
        </div>
        <div class="main">
            <div class="item-table">
                <ul id="myTab" class="nav nav-tabs">
                    <li class="active"><a href="#table1" data-toggle="tab">专场介绍</a></li>
                    <li><a href="#table2" data-toggle="tab">求职大厅</a></li>
                    <li><a href="#table3" data-toggle="tab">报名详情</a></li>
                </ul>
            </div>
            <div id="tab-content">

            </div>
        </div>
    </div>

</body>
<script>
    var datatable1 = [

        { content: '意思就是当前的那个标签没有定义，原因是html的执行顺序是从上到下，在标签还没有加载的时候该方法就被调用了，所以会出没有定义的错误' }

    ]
    $(function () {
        $('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
            //为tab按钮绑定事件
            var key = $(this).parent().index();
            switch (key) {
                case 0:
                    // $ajax({
                    //     type: "GET",
                    //     url: './js/mock.json',
                    //     data: data,
                    //     success: function (res) {
                    //        
                    //     }

                    // });
                    var str = `<p class="p1">` + datatable1[0].content + `</p>`;
                    $("#tab-content").html(str);
                    break;
                case 1:
                    data = { name: '求职大厅' };
                    var str = ` <div class="search-bar" id="search">
                    <div class="searchform">
                        <div class="input-group">
                            <i class="iconfont my-icon-sousuo"></i>
                            <input type="search" name="data" id="input-search" class="form-control"
                                placeholder="请输入关键词">
                        </div>
                    </div>
                </div>`;
                    for (let x = 0; x < 19; x++) {
                        str = htmltable2(str);
                    }


                    $("#tab-content").html(str);
                    searchtop();
                    search1();
                    break;
                case 2:
                    data = { name: '报名详情' };
                    var str = ` <div class="search-bar" id="search">
                    <div class="searchform">
                        <div class="input-group">
                            <i class="iconfont my-icon-sousuo"></i>
                            <input type="search" name="data" id="input-search2" class="form-control"
                                placeholder="职位/专业">
                        </div>
                    </div>
                </div>`;
                    for (let x = 0; x < 29; x++) {
                        str = htmltable3(str);
                    }

                    $("#tab-content").html(str);
                    searchtop();
                    search2();
                    break;
            }
        });
        $('ul.nav-tabs li.active a[data-toggle="tab"]').trigger("shown.bs.tab");//默认触发  
    });
    //搜索框吸顶
    function searchtop() {
        // var el_top = document.querySelector("#top"),
        var el_search = document.querySelector("#search");
        var height = el_search.offsetTop;
        var flag = true;
        console.log('height: ', height);
        document.addEventListener("scroll", function () {
            var heightTop = document.documentElement.scrollTop || document.body.scrollTop;
            console.log('heightTop: ', heightTop);
            if (heightTop >= height) {
                if (flag) {
                    flag = false;
                    // el_top.classList.add("active");
                    el_search.classList.add("fixed");
                }
            } else {
                if (!flag) {
                    flag = true;
                    // el_top.classList.remove("active");
                    el_search.classList.remove("fixed");
                }
            }
        }, false);
    };
    //跳转页面
    $('#tab-content').on('click', '.item-container', function () {
        location.href = "http://www.baidu.com" + '?id' + this.id;
    })

    $('#tab-content').on('click', '.cart', function () {
        location.href = "http://www.baidu.com" + '?id' + this.id;
    })
    //搜索
    function search1() {
        $('#input-search').on('keyup', function (e) {
            if (e.keyCode === 13) {
                var str = ` <div class="search-bar" id="search">
                    <div class="searchform">
                        <div class="input-group">
                            <i class="iconfont my-icon-sousuo"></i>
                            <input type="search" name="data" id="input-search" class="form-control"
                                placeholder="请输入关键词">
                        </div>
                    </div>
                </div>`;
                for (let x = 0; x < 19; x++) {
                str = htmltable2(str)}

                $("#tab-content").html(str);
                alert("1")
            }
        })
    }
    function search2() {
        $('#input-search2').on('keyup', function (e) {
            if (e.keyCode === 13) {
                var str = ` <div class="search-bar" id="search">
                    <div class="searchform">
                        <div class="input-group">
                            <i class="iconfont my-icon-sousuo"></i>
                            <input type="search" name="data" id="input-search2" class="form-control"
                                placeholder="职位/专业">
                        </div>
                    </div>
                </div>`;
                str = htmltable3(str)
                $("#tab-content").html(str);

            }
        })
    }
    //table2的内容
    function htmltable2(str) {
        str += `<div id=" 1 " class="item-container">
                <div class="left-has-img">
                <img src=" url + ">
                </div>
                <div class="item-content">
                <p class="content-person">
                <span> + 谭小庆 + </span>
                <span class="has-margin"> + 男 + | + 200 + | + e.edu + </span>
                </p>
                <p class="content-time p">
                <i class="iconfont my-icon-shijian"></i>
                <span class="has-style"> + e.date + &nbsp; + e.time + </span>
                </p>
                <p class="content-role p">
                <i class="iconfont my-icon-zhanghao"></i>
                <span class="has-style"> + e.job + | + e.salary + </span>
                </p></div></div>`;
        return str

    }
    //table3的内容
    function htmltable3(str) {
        str += `<div class="cart" id="+e.id+">
                    <div class="cart-left">
                        <p class="cart-tit">数学双语老师</p>
                        <p class="cart-other">苏州市科技城嘉陵径路23asdasd 硕士以上大苏打实打实大</p>
                    </div>
                    <div class="cart-right">
                        <p class="cart-company">苏州科技城外国语按时打算打算打算打算</p>
                        <i class="iconfont my-icon-weimingmingwenjianjia_jiantou"></i>
                        <p class="salary">15000/月</p>
                    </div>
                </div>`;
        return str
    }





</script>

</html>